<template>
  <div class="wx-container">
    <div class="navbar-item">
       <el-button type="info" icon="el-icon-close" circle @click="close"></el-button>
    </div>
    <div class="head-item">
      <!-- <h1>进入公众号</h1> -->
      <h3>我们将在企业中为您提供 流水线 服务</h3>
      <el-divider ></el-divider>
    </div>
    <div class="body-item">
      <el-row v-for="item in wxAccountList" :key="item.id" @click.native="toWxAccount(item)" style="cursor:pointer">
        <el-col :span="3"><el-avatar :size="40" :src="item.img" shape="square"></el-avatar></el-col>
        <el-col :span="20"><div style="font-size: 20px;margin-top: 6px;"><el-link :underline="false">{{item.name}}</el-link></div></el-col>
        <el-col :span="1"> <div style="margin-top: 12px;"><i class="el-icon-arrow-right"></i></div></el-col>
      </el-row>
      <el-row @click.native="toWxAccount()" style="cursor:pointer">
        <el-col :span="3"><el-avatar :size="40" icon="el-icon-plus" shape="square"></el-avatar></el-col>
        <el-col :span="21"><div style="font-size: 18px;color: #8C8C97;"><el-link :underline="false">创建新的公众号</el-link></div>
                           <div style="font-size: 14px;color: #bfcde0;"><span>可用于企业、组织或团队</span></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { fetchWxAccountList } from '@/api/wx'
export default {
  name: 'WxAccountChange',
  data() {
    return {
      wxAccountList: [],
      currentItem : {name: '',appid:''}
    }
  },
  created() {
    this.getDataList()
  },
  methods:{
    close(){
      this.$router.push({ path: '/index', query: { }})
    },
    toWxAccount(item){
      this.submitMp(item)
      this.$router.push({ name: 'Account', query: { }})
    },
    // 获取数据列表
    getDataList() {
      var that = this
      const queryParams = {}
      fetchWxAccountList(queryParams).then(response => {
        this.wxAccountList = response.data.records
      })
    },
    submitMp(item){
      this.currentItem = item
      this.$store.commit('wxAccount/selectAccount',this.currentItem)
      this.$modal.msgSuccess("切换成功");
    }
  }
}
</script>
<style lang="scss" scoped>
  .wx-container{
    width: 1200px;
    height: 90%;
    margin: 0 auto;
  }
  .navbar-item{
    position: relative;
    padding-top: 50px;
    margin-left: 99%;
  }
  .head-item{
    margin: 50px auto;
    width: 600px;
    h1{  font-size: 40px;}
    h3{  color: #8C8C97; }
  }
  .body-item{
    margin: 80px auto;
    width: 600px;
    height: 180px;
    border-radius: 5px;
    .el-row{
      margin: 20px 0;
    }
  }

</style>
